import React from 'react';
import { Button, Table } from 'antd';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import styles from '../index.less';
import { DeleteOutlined } from '@ant-design/icons';

const valueEnum = {
  0: 'close',
  1: 'running',
  2: 'online',
  3: 'error',
};

export type TableListItem = {
  key: number;
  name: string;
  progress: string;
  containers: string;
  callNumber: string;
  creator: string;
  status: string;
  createdAt: string;
  memo: string;
};

const DemandList: React.FC = () => {
  const tableListDataSource: TableListItem[] = [];
  const need = require('@/assets/imgs/need.png');

  for (let i = 0; i < 5; i += 1) {
    tableListDataSource.push({
      key: i,
      name: `解决方案中心${i}`,
      containers: `JAVA后端开发`,
      callNumber: '不限',
      progress: '18-30岁',
      creator: '3-5年',
      status: valueEnum[Math.floor(Math.random() * 10) % 4],
      // createdAt: Date.now() - Math.floor(Math.random() * 100000),
      createdAt: '本科以上',
      memo: i % 2 === 1 ? '员工离职补位' : '工作负荷过载',
    });
  }

  const columns: ProColumns<TableListItem>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      width: 70,
      fixed: 'left',
      render: (_, r, index) => <>{index + 1}</>,
    },
    {
      title: '申请部门',
      dataIndex: 'name',
      fixed: 'left',
      render: (_) => <>{_}</>,
    },
    {
      title: '提出人',
      dataIndex: 'name1',
      fixed: 'left',
      render: (_) => <>王小明</>,
    },
    {
      title: '需求职位',
      dataIndex: 'containers',
      align: 'left',
      search: false,
    },
    {
      title: '需求性别',
      align: 'left',
      dataIndex: 'callNumber',
    },
    {
      title: '需求年龄',
      dataIndex: 'progress',
    },
    {
      title: '工作年限',
      dataIndex: 'creator',
    },
    {
      title: '需求学历',
      key: 'since',
      dataIndex: 'createdAt',
    },
    {
      title: '需求类型',
      dataIndex: 'memo',
      // ellipsis: true,
      // copyable: true,
      // search: false,
    },
    {
      title: '需求状态',
      dataIndex: 'memo1',
      render: (_, record, index) => {
        return index % 2 === 1 ? (
          <Button
            type="primary"
            ghost
            className={styles.btn}
            size="small"
            style={{ cursor: 'default' }}
          >
            审批中
          </Button>
        ) : index % 3 === 1 ? (
          <Button
            className={styles.btn}
            style={{ color: '#1BBF82', borderColor: '#1BBF82', cursor: 'default' }}
            size="small"
          >
            已同意
          </Button>
        ) : (
          <Button danger className={styles.btn} size="small" style={{ cursor: 'default' }}>
            不同意
          </Button>
        );
      },
      // ellipsis: true,
      // copyable: true,
      // search: false,
    },
    {
      title: '操作',
      width: 180,
      key: 'option',
      valueType: 'option',
      fixed: 'right',
      render: () => (
        <>
          <a key="link">查看详情</a> &nbsp;
          <DeleteOutlined
            className={styles.delIcon}
            onClick={() => {
              // del();
            }}
          />
        </>
      ),
    },
  ];

  return (
    <>
      {tableListDataSource.length ? (
        <ProTable<TableListItem>
          columns={columns}
          size="large"
          rowSelection={{
            // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
            // 注释该行则默认不显示下拉选项
            selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
          }}
          //   tableAlertRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => (
          //     <Space size={24}>
          //       <span>
          //         已选 {selectedRowKeys.length} 项
          //         <a style={{ marginLeft: 8 }} onClick={onCleanSelected}>
          //           取消选择
          //         </a>
          //       </span>
          //     </Space>
          //   )}
          //   tableAlertOptionRender={false}
          dataSource={tableListDataSource}
          scroll={{ x: 1300 }}
          options={false}
          search={false}
          rowKey="key"
          headerTitle={false}
          toolBarRender={false}
        />
      ) : (
        <div className={styles.need}>
          <img src={need} />
          <div className={styles.text}>请先提交用人需求！</div>
        </div>
      )}
    </>
  );
};
export default DemandList;
